<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <title>根据覆盖物调整显示范围</title>
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <div class="input-card" style="width: 24rem">
      <h4>根据覆盖物调整显示范围</h4>
      <div class="input-item">
        <button class="btn" id="fitblue" style="margin-right: 1rem">
          自适应蓝色标记
        </button>
        <button class="btn" id="fitall">自适应所有标记</button>
      </div>
    </div>

    <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script>
      //创建地图
      var map = new AMap.Map('container', {
        zoom: 10,
        center: [116.405285, 39.904989],
      })

      // 创建两个点标记
      var m1 = new AMap.Marker({
        position: [116.49, 39.9],
      })
      var m2 = new AMap.Marker({
        position: [116.29, 39.9],
      })
      var m3 = new AMap.Marker({
        position: [116.69, 39.9],
        icon: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png',
      })

      map.add(m1)
      map.add(m2)
      map.add(m3)

      //自动适配到指定视野范围
      document.querySelector('#fitblue').onclick = function () {
        map.setFitView([m1, m2])
      }

      //无参数时，自动自适应所有覆盖物
      document.querySelector('#fitall').onclick = function () {
        map.setFitView()
      }
    </script>
  </body>
</html>
